<template>
  <div>
    <van-row>
      <van-col span="24"
               style="height:20px">

      </van-col>
    </van-row>

    <form action="/">
      <van-search v-model="searchParam.keyword"
                  show-action
                  placeholder="请输入搜索关键词"
                  @search="onSearch"
                  @cancel="onCancel" />
    </form>

    <van-row>
      <van-col span="24"
               style="height:20px">
        分类：<a v-for="(category,index) in categorys"
           :key="index"
           @click="categorySelect(category.categoryId)">{{category.categoryName}}</a>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24"
               style="height:20px;float:left">
        属性区域:
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24"
               style="height:20px"
               v-for="(attr,attrIndex) in attrs"
               :key="attrIndex">
        {{attr.attrName}}：<a v-for="(attrValueItem,attrValueIndex) in attr.attrValue"
           :key="attrValueIndex"
           @click="attrValueSelect(attr.attrId,attrValueItem)">{{attrValueItem}}</a>
      </van-col>
    </van-row>
    <van-card 
              v-for="(good,index) in goods"
              :key="index"
              :price="good.skuPrice.toFixed(2)"
              :desc="good.skuTitle"
              :title="good.skuName"
              :thumb="good.skuImg"
              @click-thumb="togoodInfo(good.id)"
               />
    <van-tabbar route>
      <van-tabbar-item replace
                       to="/home"
                       icon="home-o">主页</van-tabbar-item>
      <van-tabbar-item replace
                       to="/activity"
                       icon="gem-o">活动</van-tabbar-item>

      <van-tabbar-item replace
                       to="/cart"
                       icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item replace
                       to="/me"
                       icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { Toast } from 'vant';
import { searchFromEs } from '@/api/testSearch'
export default {
  components: {},
  props: {},
  data () {
    return {
      searchParam: {
        keyword: '',
        categoryId: null,
        skuPrice: '',
        attrs: [],
        sort: '',
        pageNum: 1,
        pageSize: 20,
        _queryString: ''
      },
      goods: [],
      pageNum: 0,
      total: 0,
      totalPages: 0,
      pageNavs: [],
      attrs: [],
      categorys: []
    }

  },

  computed: {},
  watch: {},
  methods: {
    load () {
      this.loading = true
      searchFromEs(this.searchParam).then(res => {
        console.log('搜索构建：', res.data.data)
        this.goods = res.data.data.goods
        this.pageNum = res.data.data.pageNum
        this.total = res.data.data.total
        this.totalPages = res.data.data.totalPages
        this.pageNavs = res.data.data.pageNavs
        this.attrs = res.data.data.attrs
        this.categorys = res.data.data.categorys
      })
    },
    categorySelect (v) {
      this.searchParam.categoryId = v
      this.load()
    },
    togoodInfo(id){
      this.$router.push({path:'/goodInfo/'+id,query:{ id:id }})
    },

    attrValueSelect (id, v) {
      const a = id + '_' + v
      this.searchParam.attrs.push(a)
      console.log(this.searchParam.attrs)
      this.load()
    },
    onChange (v) {
      if (v === 'me')
      {
        this.meState = true
      }
    },
    onClickIcon () {
      Toast('点击图标');
    },
    onClickButton () {
      Toast('点击按钮');
    },
    onSearch (val) {
      this.load(val)
    },
    onCancel () {

    },
  },
  created () {this.load() },
  mounted () { },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { }
}
</script>
<style lang='less'>
</style>